<template>
  <div class="dialog" v-if="form">
    <div class="title">业务系统基本信息</div>
    <div class="wrap1" v-if="form.cloudUp">
      <div>
        <div>系统名称:</div>
        {{ form.cloudUp.projectname }}
      </div>
      <div>
        <div>云服务商:</div>
        {{ form.cloudUp.supplierName }}
      </div>
      <div>
        <div>上线时间:</div>
        {{ form.cloudUp.onlinetime }}
      </div>
      <div>
        <div>上云区域:</div>
        {{ form.cloudUp.cloudUpAreaValue }}
      </div>
      <div>
        <div>业务部门:</div>
        {{ form.cloudUp.officeName }}
      </div>
      <div>
        <div>业主方联系人:</div>
        {{ form.cloudUp.contactsNickName }}
      </div>
      <div>
        <div>联系电话:</div>
        {{ form.cloudUp.contactsinfo }}
      </div>
      <div>
        <div>邮箱:</div>
        {{ form.cloudUp.email }}
      </div>
      <div>
        <div>承建单位:</div>
        {{ form.cloudUp.constunit }}
      </div>
      <div>
        <div>承建方联系人:</div>
        {{ form.cloudUp.constcts }}
      </div>
      <div>
        <div>联系电话:</div>
        {{ form.cloudUp.constctsinfo }}
      </div>
      <div>
        <div>邮籍:</div>
        {{ form.cloudUp.constemail }}
      </div>
      <div style="width: 100%">
        <div style="width: auto">系统建设（运维）资金来源:</div>
        {{ form.cloudUp.fundFrom }}
      </div>
      <div style="width: 100%">
        <div style="width: auto">自行落实部门上云经费:</div>
        {{ form.cloudUp.fundBySelf ? "是" : "否" }}
      </div>
      <div style="width: 100%">
        <div>项目简介:</div>
        {{ form.cloudUp.introduction }}
      </div>
      <div style="width: 100%">
        <div>申请理由:</div>
        {{ form.cloudUp.remarks }}
      </div>
    </div>
    <div class="title">申请资源</div>
    <div style="width: 100%">
      <label style="margin-right: 10px">服务商:</label>
      <span>{{ form.cloudSupplier_label }}</span>
    </div>
    <!-- <el-button type="primary" style="padding: 10px 40px; margin: 20px 0" @click="showAdd(1,false)">新增</el-button> -->
    <div class="wrap" style="">
      <div class="wrap_title">
        <div>服务器</div>
      </div>
      <div style="padding: 20px 20px; width: 100%; height: 620px; overflow-y: auto">
        <el-table v-if="form.hosts" :data="getTableData(form.hosts)" style="margin-top: 13px; overflow-x: auto">
          <el-table-column label="资源类型" fixed>
            <template slot-scope="scope">
              {{
                scope.row.flavorType == 1
                  ? "云服务器"
                  : scope.row.flavorType == 2
                  ? "高性能服务器"
                  : scope.row.serverCode
                  ? "数据库"
                  : "存储产品"
              }}
            </template>
          </el-table-column>
          <el-table-column label="实例名称" fixed>
            <template slot-scope="scope">
              <span v-if="scope.row.flavorType">{{ scope.row.specifyIp || scope.row.hostName }}</span>
              <span v-else-if="scope.row.serverCode">{{ scope.row.hostInstanceName }}</span>
              <span v-else-if="!scope.row.hostInstanceNames.length"></span>
              <div v-else style="margin-bottom: 6px" v-for="(item, index) in scope.row.hostInstanceNames" :key="index">
                {{ item }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="资源详情" width="300">
            <template slot-scope="scope">
              <div v-if="scope.row.flavorType" placement="top-start" width="300" trigger="hover">
                <div style="margin-bottom: 6px">
                  <label>IP：</label>
                  <!-- {{ scope.row.osName }} -->
                  {{ scope.row.specifyIp }}
                </div>
                <div style="margin-bottom: 6px">
                  <label>序列号：</label>
                  <!-- {{ scope.row.osName }} -->
                  {{ scope.row.sn }}
                </div>
                <!-- <div style="margin-bottom: 6px">
                                    <label>可用域：</label
                                    >{{ scope.row.availableDomain_label }}
                                </div> -->
                <!-- <div style="margin-bottom: 6px">
                                    <label
                                        >{{
                                            scope.row.flavorType == 1
                                                ? "规格分类"
                                                : "资源类型"
                                        }}：</label
                                    >{{ scope.row.cloudFlavorCode_label }}
                                </div> -->
                <div style="margin-bottom: 6px" v-if="scope.row.flavorType == 1">
                  <label>规格：</label>
                  <!-- {{ scope.row.cloudFlavorCode_desc }} -->
                  {{ scope.row.cpuNumber }}核vCPU；{{ scope.row.memorySize }}G内存；
                </div>
                <div style="margin-bottom: 6px" v-if="scope.row.flavorType == 2">
                  <label>规格：</label>
                  {{ scope.row.cloudFlavorCode_desc || cloudFlavorCodeDesc(scope.row.cloudFlavorCode) }}
                </div>
                <div style="margin-bottom: 6px" v-if="scope.row.flavorType == 1 && scope.row.osDisk">
                  <label>系统盘：</label>{{ scope.row.osDisk ? scope.row.osDisk.diskServerName : "" }}，{{
                    scope.row.osDisk ? scope.row.osDisk.dataDiskSize : ""
                  }}GB
                </div>
                <div style="margin-bottom: 6px">
                  <label>操作系统：</label>
                  <!-- {{ scope.row.osName }} -->
                  {{ scope.row.osName || TranslateosName(scope.row.osServerCode) }}
                </div>
                <div style="margin-bottom: 6px" v-if="scope.row.flavorType == 1">
                  <label>
                    数据盘(共<span style="color: #e83112">{{ scope.row.disks.length }}</span
                    >块){{ scope.row.disks.length ? ":" : "" }}</label
                  >
                </div>
                <div
                  v-if="scope.row.flavorType == 1"
                  style="margin: 0 0 6px 16px"
                  v-for="(item, index) in scope.row.disks"
                  :key="index"
                >
                  <span>{{ item.diskServerName }}</span
                  >，{{ item.dataDiskSize }}GB
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="false" width="450">
            <template slot="header" slot-scope="scope">
              <div style="text-align: center">变更前费用</div>
              <div class="tab_wrap">
                <div>名称</div>
                <div>用量</div>
                <div>单价</div>
                <div>总价（天）</div>
              </div>
            </template>
            <template slot-scope="scope" v-if="scope.row.meterageList">
              <div
                class="tab_wrap"
                v-for="(item, index) in scope.row.meterageList || [scope.row.meterage]"
                :key="index"
              >
                <div>
                  {{ item.resourceName ? item.resourceName : "" }}
                </div>
                <div>{{ item.useCount }}{{ item.useCountUnit }}</div>
                <div>¥{{ item.resourcePrice }}{{ item.resourcePriceUnit }}</div>
                <div>¥{{ item.resourcePriceTotalStr }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="huanyuan1" label="变更内容" width="300">
            <template slot-scope="scope">
              <div v-if="!scope.row.changeTo || !scope.row.changeTo.insStatus">未变更</div>
              <div v-else-if="scope.row.insStatus == 'REMOVE' || scope.row.changeTo.insStatus == 'REMOVE'">已回收</div>
              <div v-else>
                <div placement="top-start" width="300" trigger="hover">
                  <div
                    v-if="
                      scope.row.changeTo.specifyIp && form.hosts[scope.$index].specifyIp != scope.row.changeTo.specifyIp
                    "
                    style="margin-bottom: 6px"
                  >
                    <label>IP：</label>
                    {{ scope.row.changeTo.specifyIp }}
                  </div>
                  <div
                    v-if="scope.row.changeTo.sn && form.hosts[scope.$index].sn != scope.row.changeTo.sn"
                    style="margin-bottom: 6px"
                  >
                    <label>序列号：</label>
                    {{ scope.row.changeTo.sn }}
                  </div>
                  <div
                    style="margin-bottom: 6px"
                    v-show="form.hosts[scope.$index].cloudFlavorCode != scope.row.changeTo.cloudFlavorCode"
                  >
                    <label>
                      {{
                        (scope.row.changeTo ? scope.row.changeTo.flavorType : "1") == "1" ? "规格分类" : "资源类型"
                      }}：
                      <template v-if="scope.row.flavorType == 1">
                        {{
                          cloudFlavorCodes(
                            scope.row.changeTo ? scope.row.changeTo.cloudFlavorCode : scope.row.cloudFlavorCode
                          )
                        }}
                      </template>
                      <template v-if="scope.row.flavorType == 2">
                        {{
                          wlfwqLists(
                            scope.row.changeTo ? scope.row.changeTo.cloudFlavorCode : scope.row.cloudFlavorCode
                          )
                        }}
                      </template>
                    </label>
                  </div>
                  <template>
                    <div
                      style="margin-bottom: 6px"
                      v-show="
                        form.hosts[scope.$index].memorySize != scope.row.changeTo.memorySize ||
                        form.hosts[scope.$index].cpuNumber != scope.row.changeTo.cpuNumber ||
                        form.hosts[scope.$index].cloudFlavorCode != scope.row.changeTo.cloudFlavorCode
                      "
                    >
                      <label>规格：</label>
                      <template v-if="scope.row.flavorType == 1">
                        {{ scope.row.changeTo ? scope.row.changeTo.cpuNumber : scope.row.cpuNumber }}vCPU；
                        {{ scope.row.changeTo ? scope.row.changeTo.memorySize : scope.row.memorySize }}G内存
                      </template>
                      <template v-if="scope.row.flavorType == 2">
                        {{
                          wlfwqListss(
                            scope.row.changeTo ? scope.row.changeTo.cloudFlavorCode : scope.row.cloudFlavorCode
                          )
                        }}
                      </template>
                    </div>
                  </template>
                  <div
                    style="margin-bottom: 6px"
                    v-if="
                      scope.row.changeTo.flavorType == 1 &&
                      scope.row.changeTo.osDisk &&
                      form.hosts[scope.$index].osDisk &&
                      (form.hosts[scope.$index].osDisk.diskServerCode != scope.row.changeTo.osDisk.diskServerCode ||
                        form.hosts[scope.$index].osDisk.dataDiskSize != scope.row.changeTo.osDisk.dataDiskSize)
                    "
                  >
                    <label>系统盘：</label>
                    {{
                      scope.row.changeTo ? scope.row.changeTo.osDisk.diskServerName : scope.row.osDisk.diskServerName
                    }}，{{
                      scope.row.changeTo ? scope.row.changeTo.osDisk.dataDiskSize : scope.row.osDisk.dataDiskSize
                    }}GB
                  </div>
                  <div
                    style="margin-bottom: 6px"
                    v-if="scope.row.changeTo.flavorType && form.hosts[scope.$index].osName != scope.row.changeTo.osName"
                  >
                    <label>操作系统：</label>
                    {{ scope.row.changeTo.osName || TranslateosName(scope.row.changeTo.osServerCode) }}
                  </div>
                  <template v-if="scope.row.flavorType == 1">
                    <div style="margin-bottom: 6px" v-if="scope.row.changeTo && scope.row.changeDiskFlag">
                      <label>
                        数据盘(共<span style="color: #e83112">
                          {{ scope.row.changeTo.disks ? scope.row.changeTo.disks.length : 0 }} </span
                        >块)
                        {{ scope.row.changeTo ? (scope.row.changeTo.disks ? ":" : "") : "" }}
                      </label>
                    </div>

                    <!-- <div
                                            style="margin-bottom: 6px"
                                            v-else
                                            v-show="scope.row.disks.length != scope.row.changeTo.disks.length"
                                        >
                                            <label>
                                                2
                                                数据盘(共<span
                                                    style="color: #e83112"
                                                    >
                                                    {{scope.row.disks.length}}
                                                    </span
                                                >块)
                                                {{scope.row.disks.length? scope.row.disks.length: ""}}
                                                </label
                                            >
                                        </div> -->
                  </template>
                  <template v-if="scope.row.flavorType == 1 && scope.row.changeDiskFlag">
                    <div
                      v-if="huanyuan1"
                      style="margin: 0 0 6px 16px"
                      v-for="(item, index) in scope.row.changeTo.disks"
                      :key="index"
                    >
                      <div>
                        <span>{{ item.diskServerCode_label ? item.diskServerCode_label : item.diskServerName }}</span
                        >，<span>{{ item.dataDiskSize }}GB</span>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column v-if="false" width="450">
            <template slot="header" slot-scope="scope">
              <div style="text-align: center">变更后费用</div>
              <div class="tab_wrap">
                <div>名称</div>
                <div>用量</div>
                <div>单价</div>
                <div>总价（天）</div>
              </div>
            </template>
            <template slot-scope="scope" v-if="scope.row.changeTo">
              <div
                class="tab_wrap"
                v-for="(item, index) in scope.row.changeTo.meterageList || [scope.row.meterage]"
                :key="index"
              >
                <div>
                  {{ item.resourceName ? item.resourceName : "" }}
                </div>
                <div>{{ item.useCount }}{{ item.useCountUnit }}</div>
                <div>¥{{ item.resourcePrice }}{{ item.resourcePriceUnit }}</div>
                <div>¥{{ item.resourcePriceTotalStr }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            width="160"
            label="操作"
            class-name="small-padding fixed-width"
            v-if="taskName == '资源变更' || taskName == '云服务商处理'"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit-outline"
                v-show="scope.row.changeTo ? scope.row.changeTo.insStatus != 'REMOVE' : scope.row.insStatus != 'REMOVE'"
                @click="
                  showAdd(
                    2,
                    (
                      scope.row.changeTo
                        ? form.hosts[scope.$index].changeTo.insStatus == 'ADD'
                        : form.hosts[scope.$index].insStatus == 'ADD'
                    )
                      ? scope.row
                      : scope.row.changeTo,
                    scope.$index
                  )
                "
                >修改
              </el-button>
              <el-button
                v-if="taskName == '资源变更'"
                size="mini"
                type="text"
                icon="el-icon-delete"
                v-show="scope.row.changeTo ? scope.row.changeTo.insStatus != 'REMOVE' : scope.row.insStatus != 'REMOVE'"
                @click="del(scope.row.changeTo ? scope.row.changeTo : scope.row, scope.$index, 1)"
                >删除
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-refresh-left"
                v-if="taskName == '资源变更'"
                v-show="scope.row.changeTo ? scope.row.changeTo.insStatus != 'ADD' : scope.row.insStatus != 'ADD'"
                @click="huanyuan(scope.row.changeTo ? scope.row.changeTo : scope.row, scope.$index, 1)"
                >还原
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>数据库</div>
      </div>
      <div style="padding: 20px 20px; width: 100%">
        <el-table v-if="form.databases" :data="form.databases" style="width: 100%; margin-top: 13px; overflow-x: auto">
          <el-table-column label="版本">
            <template slot-scope="scope">
              <span>{{ scope.row.databaseVersion }}</span>
            </template>
          </el-table-column>
          <el-table-column label="资源详情" width="300">
            <template slot-scope="scope">
              <div placement="top-start" width="300" trigger="hover">
                <div style="margin-bottom: 6px"><label>类型：</label>{{ scope.row.serverCode_label }}</div>
                <div style="margin-bottom: 6px"><label>版本：</label>{{ scope.row.databaseVersion }}</div>
                <div style="margin-bottom: 6px"><label>位数：</label>{{ scope.row.systemDigits }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="false" width="400">
            <template slot="header" slot-scope="scope">
              <div style="text-align: center">变更前费用</div>
              <div class="tab_wrap">
                <div>名称</div>
                <div>用量</div>
                <div>单价</div>
                <div>总价（天）</div>
              </div>
            </template>
            <template slot-scope="scope" v-if="scope.row.meterageList ? scope.row.meterageList : scope.row.meterage">
              <div
                class="tab_wrap"
                v-for="(item, index) in scope.row.meterageList || [scope.row.meterage]"
                :key="index"
              >
                <div>
                  {{ item.resourceName ? item.resourceName : "" }}
                </div>
                <div>{{ item.useCount }}{{ item.useCountUnit }}</div>
                <div>¥{{ item.resourcePrice }}{{ item.resourcePriceUnit }}</div>
                <div>¥{{ item.resourcePriceTotalStr }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="变更内容" width="300">
            <template slot-scope="scope">
              <div v-if="!scope.row.changeTo || !scope.row.changeTo.insStatus">未变更</div>
              <div v-else-if="scope.row.changeTo.insStatus == 'REMOVE'">已回收</div>
              <div v-else>
                <div placement="top-start" width="300" trigger="hover">
                  <div style="margin-bottom: 6px">
                    <label>类型：</label>
                    {{ scope.row.changeTo ? scope.row.changeTo.serverName : scope.row.serverName }}
                  </div>
                  <div style="margin-bottom: 6px">
                    <label>版本：</label
                    >{{ scope.row.changeTo ? scope.row.changeTo.databaseVersion : scope.row.databaseVersion }}
                  </div>
                  <div style="margin-bottom: 6px">
                    <label>位数：</label
                    >{{ scope.row.changeTo ? scope.row.changeTo.systemDigits : scope.row.systemDigits }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="false" width="400">
            <template slot="header" slot-scope="scope">
              <div style="text-align: center">变更后费用</div>
              <div class="tab_wrap">
                <div>名称</div>
                <div>用量</div>
                <div>单价</div>
                <div>总价（天）</div>
              </div>
            </template>
            <template slot-scope="scope" v-if="scope.row.changeTo">
              <div
                class="tab_wrap"
                v-for="(item, index) in scope.row.changeTo.meterageList || [scope.row.meterage]"
                :key="index"
              >
                <div>
                  {{ item.resourceName ? item.resourceName : "" }}
                </div>
                <div>{{ item.useCount }}{{ item.useCountUnit }}</div>
                <div>¥{{ item.resourcePrice }}{{ item.resourcePriceUnit }}</div>
                <div>¥{{ item.resourcePriceTotalStr }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" class-name="small-padding fixed-width" v-if="taskName == '资源变更'">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit-outline"
                v-show="scope.row.changeTo ? scope.row.changeTo.insStatus != 'REMOVE' : scope.row.insStatus != 'REMOVE'"
                @click="showAdd(2, scope.row ? scope.row.changeTo : scope.row, scope.$index)"
                >修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                v-show="scope.row.changeTo ? scope.row.changeTo.insStatus != 'REMOVE' : scope.row.insStatus != 'REMOVE'"
                @click="del(scope.row ? scope.row.changeTo : scope.row, scope.$index, 2)"
                >删除
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-refresh-left"
                v-show="scope.row.changeTo ? scope.row.changeTo.insStatus != 'ADD' : scope.row.insStatus != 'ADD'"
                @click="huanyuan(scope.row, scope.$index, 2)"
                >还原
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>存储产品</div>
      </div>
      <div style="padding: 20px 20px; width: 100%">
        <el-table
          v-if="form.storeProducts"
          :data="form.storeProducts"
          style="width: 100%; margin-top: 13px; overflow-x: auto"
        >
          <el-table-column label="磁盘类型">
            <template slot-scope="scope">
              {{ scope.row.diskServerName }}
            </template>
          </el-table-column>
          <el-table-column label="磁盘用量">
            <template v-if="scope.row.dataDiskSize" slot-scope="scope">
              <span> {{ scope.row.dataDiskSize }}GB </span>
            </template>
          </el-table-column>
          <el-table-column label="资源详情" width="300">
            <template slot-scope="scope">
              <div placement="top-start" width="300" trigger="hover">
                <div style="margin-bottom: 6px"><label>存储类型：</label>{{ scope.row.productCode }}</div>
                <div style="margin-bottom: 6px"><label>服务类型：</label>{{ scope.row.diskCode }}</div>
                <div style="margin-bottom: 6px"><label>服务类型：</label>{{ scope.row.diskServerName }}</div>
                <div style="margin-bottom: 6px">
                  <label>磁盘：</label>{{ scope.row.diskServerName }}，{{ scope.row.dataDiskSize }}GB
                </div>
                <div style="margin-bottom: 6px">
                  <label>服务器：</label>
                  <div v-for="item in scope.row.hostIds">
                    {{ gethostName(item) }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="变更内容" width="300">
            <template slot-scope="scope">
              <div v-if="!scope.row.changeTo || !scope.row.changeTo.insStatus">未变更</div>
              <div v-else-if="scope.row.changeTo.insStatus == 'REMOVE'">已删除</div>
              <div v-else>
                <div placement="top-start" width="300" trigger="hover">
                  <div style="margin-bottom: 6px">
                    <label>存储类型：</label
                    >{{ scope.row.changeTo ? scope.row.changeTo.productCode : scope.row.productCode }}
                  </div>
                  <div style="margin-bottom: 6px">
                    <label>服务类型：</label>{{ scope.row.changeTo ? scope.row.changeTo.diskCode : scope.row.diskCode }}
                  </div>
                  <div style="margin-bottom: 6px">
                    <label>磁盘类型：</label
                    >{{ scope.row.changeTo.diskServerCode_label || scope.row.changeTo.diskServerName }}
                  </div>
                  <div style="margin-bottom: 6px">
                    <label>磁盘：</label
                    >{{
                      scope.row.changeTo.diskServerCode_label
                        ? scope.row.changeTo.diskServerCode_label
                        : scope.row.changeTo.diskServerName
                    }}，{{ scope.row.changeTo ? scope.row.changeTo.dataDiskSize : scope.row.dataDiskSize }}GB
                  </div>
                  <div style="margin-bottom: 6px">
                    <label>服务器：</label>
                    <div v-for="(item, index) in scope.row.changeTo.hostIds" :key="index">
                      {{ gethostName(item) }}
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" class-name="small-padding fixed-width" v-if="taskName == '资源变更'">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit-outline"
                v-show="scope.row.changeTo ? scope.row.changeTo.insStatus != 'REMOVE' : scope.row.insStatus != 'REMOVE'"
                @click="showAdd(2, scope.row.changeTo ? scope.row.changeTo : scope.row, scope.$index)"
                >修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                v-show="scope.row.changeTo ? scope.row.changeTo.insStatus != 'REMOVE' : scope.row.insStatus != 'REMOVE'"
                @click="del(scope.row.changeTo ? scope.row.changeTo : scope.row, scope.$index, 3)"
                >删除
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-refresh-left"
                v-show="scope.row.changeTo ? scope.row.changeTo.insStatus != 'ADD' : scope.row.insStatus != 'ADD'"
                @click="huanyuan(scope.row, scope.$index, 3)"
                >还原
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>安全产品</div>
      </div>
      <div style="padding: 20px 20px; width: 100%">
        <el-table
          v-if="form.safeProducts"
          :data="form.safeProductsList"
          style="width: 100%; margin-top: 13px; overflow-x: auto"
        >
          <el-table-column label="产品名称">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column v-if="false">
            <template slot="header" slot-scope="scope">
              <div style="text-align: center">变更前费用</div>
              <div class="tab_wrap">
                <div>用量</div>
                <div>单价</div>
                <div>总价（天）</div>
              </div>
            </template>
            <template slot-scope="scope" v-if="scope.row.meterageList ? scope.row.meterageList : scope.row.meterage">
              <div
                class="tab_wrap"
                v-for="(item, index) in scope.row.meterageList || [scope.row.meterage]"
                :key="index"
              >
                <div>{{ item.useCount }}{{ item.useCountUnit }}</div>
                <div>{{ item.resourcePrice }}{{ item.resourcePriceUnit }}</div>
                <div>¥{{ item.resourcePriceTotalStr }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="数量">
            <template slot-scope="scope">
              {{ scope.row.ysnum }}
            </template>
          </el-table-column>
          <el-table-column label="变更后数量">
            <template slot-scope="scope">
              {{ scope.row.num }}
            </template>
          </el-table-column>
          <el-table-column v-if="false">
            <template slot="header" slot-scope="scope">
              <div style="text-align: center">变更后费用</div>
              <div class="tab_wrap">
                <div>用量</div>
                <div>单价</div>
                <div>总价（天）</div>
              </div>
            </template>
            <template slot-scope="scope" v-if="scope.row.changeTo">
              <!-- v-for="(item, index) in scope.row.changeTo.meterage || [scope.row.changeTo.meterageList]" -->
              <!-- :key="index" -->
              <div class="tab_wrap">
                <div>
                  {{
                    scope.row.changeTo.meterage
                      ? scope.row.changeTo.meterage.useCount
                      : scope.row.changeTo.meterageList.useCount
                  }}
                  {{
                    scope.row.changeTo.meterage
                      ? scope.row.changeTo.meterage.useCountUnit
                      : scope.row.changeTo.meterageList.useCountUnit
                  }}
                </div>
                <div>
                  {{
                    scope.row.changeTo.meterage
                      ? scope.row.changeTo.meterage.resourcePrice
                      : scope.row.changeTo.meterageList.resourcePrice
                  }}{{
                    scope.row.changeTo.meterage
                      ? scope.row.changeTo.meterage.resourcePriceUnit
                      : scope.row.changeTo.meterageList.resourcePriceUnit
                  }}
                </div>
                <div>
                  ¥{{
                    scope.row.changeTo.meterage
                      ? scope.row.changeTo.meterage.resourcePriceTotalStr
                      : scope.row.changeTo.meterageList.resourcePriceTotalStr
                  }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" class-name="small-padding fixed-width" v-if="taskName == '资源变更'">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="editSafe(scope.$index)"
                >修改</el-button
              >
              <!-- <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                v-show="
                                    scope.row.changeTo
                                        ? scope.row.changeTo.insStatus !=
                                          'REMOVE'
                                        : scope.row.insStatus != 'REMOVE'
                                "
                                @click="
                                    del(
                                        scope.row.changeTo
                                            ? scope.row.changeTo
                                            : scope.row,
                                        scope.$index,
                                        4
                                    )
                                "
                                >删除
                            </el-button>
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-refresh-left"
                                v-show="
                                    scope.row.changeTo
                                        ? scope.row.changeTo.insStatus != 'ADD'
                                        : scope.row.insStatus != 'ADD'
                                "
                                @click="
                                    huanyuan(
                                        scope.row.changeTo
                                            ? scope.row.changeTo
                                            : scope.row,
                                        scope.$index,
                                        4
                                    )
                                "
                                >还原
                            </el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-if="priceFlag" style="margin-top: 10px; text-align: right; color: rgb(167, 167, 167)">
      变更前预估费用：<span style="color: rgb(255, 173, 77); font-size: 24px"
        >¥{{ parseInt(form.dailyPriceTotal) }}</span
      >/天
      <span style="margin-left: 20px; color: rgb(255, 173, 77); font-size: 24px"
        >¥{{ parseInt(form.yearPriceTotal) }}</span
      >/年
    </div>
    <div v-if="priceFlag" style="margin-top: 10px; text-align: right; color: rgb(167, 167, 167)">
      变更后预估费用：<span style="color: rgb(255, 173, 77); font-size: 24px"
        >¥{{ parseInt(form.dailyPriceTotalChangeTo) }}</span
      >/天
      <span style="margin-left: 20px; color: rgb(255, 173, 77); font-size: 24px"
        >¥{{ parseInt(form.yearPriceTotalChangeTo) }}</span
      >/年
    </div>
    <div v-if="priceFlag" style="margin-top: 10px; text-align: right; color: rgb(167, 167, 167)">
      费用变化：<span style="color: rgb(255, 173, 77); font-size: 24px">¥{{ form.dailyPriceTotalIncr }}</span
      >/天
      <span style="margin-left: 20px; color: rgb(255, 173, 77); font-size: 24px">¥{{ form.yearPriceTotalIncr }}</span
      >/年
    </div>
    <div class="title" style="margin-top: 30px" v-if="false">安全产品</div>
    <div class="wrap1" v-if="false">
      <div style="width: 100%">
        <span v-for="(item, index) in form.safeProducts" :key="index" style="margin-left: 20px">{{
          item.productName
        }}</span>
      </div>
    </div>
    <div v-if="otherFlag" class="title" style="margin-top: 30px">其他</div>
    <div v-if="otherFlag" class="wrap2" style="padding-top: 1px">
      <div style="display: flex"><span style="font-weight: bold; margin-right: 10px">说明:</span>{{ form.remark }}</div>
      <div style="font-weight: bold; margin-bottom: 10px">文件:</div>
      <el-table v-if="form.files" :data="form.files" style="width: 100%">
        <el-table-column prop="fileName" label="文件名称"> </el-table-column>
        <el-table-column prop="fileExt" label="文件类型"> </el-table-column>
        <el-table-column label="操作" width="200" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              v-show="
                scope.row.fileExt == 'jpeg' ||
                scope.row.fileExt == 'jpg' ||
                scope.row.fileExt == 'png' ||
                scope.row.fileExt == 'pdf' ||
                scope.row.fileExt == 'gif'
              "
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="previewFile(scope.row)"
              >预览
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              v-show="taskName == '资源变更'"
              @click="DeleteFile(scope.row.id)"
              >删除
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-download" @click="download(scope.row)">下载 </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div v-if="taskName == '资源变更'" style="font-weight: bold; margin-bottom: 10px">重新提交？增加文件:</div>
      <file-list
        v-if="taskName == '资源变更'"
        ref="fileList"
        :fileList="fileList"
        @changeFileList="changeFileList"
        @upload="upload"
      />
    </div>
    <template>
      <div class="title" style="margin-top: 30px">处理结果</div>
      <div class="wrap2" style="padding-top: 1px">
        <template v-if="taskName == '云服务商处理'">
          <div style="display: flex; margin-top: 0px">
            <div style="font-weight: bold; margin-right: 10px; width: 50px">说明:</div>
            <!-- {{ form.supplierRemark }} -->
            <el-input
              style="width: 600px"
              type="textarea"
              v-model="form.supplierRemark"
              placeholder="请输入说明"
            ></el-input>
          </div>
          <div style="font-weight: bold">
            文件:
            <el-upload
              class="upload-demo"
              style="display: initial"
              accept
              list-type="picture"
              :show-file-list="false"
              ref="upload"
              :file-list="form.supplierFiles"
              action=""
              :on-preview="handlePictureCardPreview"
              :on-remove="handleChanges"
              :on-change="handleChange"
              :auto-upload="false"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
            <div v-if="supplierFilesState">
              <el-table v-if="form.supplierFiles" :data="form.supplierFiles" style="width: 80%">
                <el-table-column label="文件名称">
                  <template slot-scope="scope">
                    {{
                      scope.row.fileName
                        ? scope.row.fileName
                        : scope.row.name.substring(0, scope.row.name.lastIndexOf("."))
                    }}
                  </template>
                </el-table-column>
                <el-table-column label="文件类型">
                  <template slot-scope="scope">
                    {{
                      scope.row.fileExt
                        ? scope.row.fileExt
                        : scope.row.name.substring(scope.row.name.lastIndexOf(".") + 1, scope.row.name.length)
                    }}
                  </template>
                </el-table-column>
                <el-table-column label="">
                  <template slot-scope="scope">
                    <span :style="scope.row.fileExt ? 'color:green;' : 'color:red;'">
                      {{ scope.row.fileExt ? "已上传" : "" }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="200"
                  class-name="small-padding fixed-width"
                  v-if="taskName == '云服务商处理'"
                >
                  <template slot-scope="scope">
                    <el-button
                      v-show="
                        scope.row.fileExt == 'image/jpeg' ||
                        scope.row.fileExt == 'image/jpg' ||
                        scope.row.fileExt == 'image/png' ||
                        scope.row.fileExt == 'image/pdf' ||
                        scope.row.fileExt == 'image/gif'
                      "
                      size="mini"
                      type="text"
                      icon="el-icon-view"
                      @click="previewFiles(scope.row)"
                      >预览
                    </el-button>
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click="DeleteFiles(scope.row)"
                      v-if="taskName == '云服务商处理'"
                      >删除
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-download" @click="download(scope.row)"
                      >下载
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </template>
        <template v-else>
          <div style="display: flex">
            <span style="font-weight: bold; margin-right: 10px">说明:</span>
            {{ form.supplierRemark }}
          </div>
          <el-table v-if="form.supplierFiles" :data="form.supplierFiles" style="width: 80%">
            <el-table-column prop="fileName" label="文件名称"> </el-table-column>
            <el-table-column prop="fileExt" label="文件类型"> </el-table-column>
            <el-table-column label="操作" width="200" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  v-show="
                    scope.row.fileExt == 'image/jpeg' ||
                    scope.row.fileExt == 'image/jpg' ||
                    scope.row.fileExt == 'image/png' ||
                    scope.row.fileExt == 'image/pdf' ||
                    scope.row.fileExt == 'image/gif'
                  "
                  type="text"
                  icon="el-icon-view"
                  @click="previewFile(scope.row)"
                  >预览
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="DeleteFile(scope.row.id)"
                  v-if="taskName == '云服务商处理'"
                  >删除
                </el-button>
                <el-button size="mini" type="text" icon="el-icon-download" @click="download(scope.row)"
                  >下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </template>
    <el-dialog :visible.sync="dialogVisible">
      <div style="max-height: 90vh; overflow-y: scroll">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </div>
    </el-dialog>
    <!-- 修改弹窗配置 -->
    <el-dialog :title="addShow == 1 ? '新增' : '修改'" :visible.sync="addShow" width="70%" append-to-body>
      <div style="max-height: 90vh; overflow-y: scroll">
        <TodoBdialog
          ref="addBdialog"
          :configure="configure"
          :hosts="form.hosts"
          :addShow="addShow"
          :supplierCode="form.cloudUp ? form.cloudUp.supplierCode : ''"
          :taskName="taskName"
          @addTable="addTable"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="$refs.addBdialog.submit()">确 定</el-button>
        <el-button @click="oncelod">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TodoBdialog from "./TodoBdialogNoXc";
import { DelectUploadFile } from "@/api/cloud/cloud";
import fileList from "@/components/FileList/index.vue";

export default {
  name: "addCtodos",
  components: { TodoBdialog, fileList },
  props: {
    form: {
      // type: Object,
      default: null,
    },
    configure: {
      type: Object,
      default: {},
    },
    hosts: {
      type: Array,
      default: function () {
        return [];
      },
    },
    otherFlag: {
      type: Boolean,
      default: true,
    },
    priceFlag: {
      type: Boolean,
      default: false,
    },
    taskName: {
      type: String,
      default: "",
    },
  },
  watch: {
    form(newVal, oldVal) {
      this.form = newVal;
      if (!oldVal.cloudSupplier) {
        let oldform = JSON.parse(JSON.stringify(newVal));
        if (oldform.hosts) {
          oldform.hosts.forEach((item, index) => {
            if (item.changeTo) {
              delete oldform.hosts[index].changeTo;
            }
          });
        }
        if (oldform.databases) {
          oldform.databases.forEach((item, index) => {
            if (item.changeTo) {
              delete oldform.databases[index].changeTo;
            }
          });
        }
        if (oldform.storeProducts) {
          oldform.storeProducts.forEach((item, index) => {
            if (item.changeTo) {
              delete oldform.storeProducts[index].changeTo;
            }
          });
        }
        if (oldform.safeProducts) {
          oldform.safeProducts.forEach((item, index) => {
            if (item.changeTo) {
              delete oldform.safeProducts[index].changeTo;
            }
          });
        }
        sessionStorage.setItem("oldform", JSON.stringify(oldform));
        setTimeout(() => {
          this.oldform = JSON.parse(sessionStorage.getItem("oldform"));
        }, 200);
      }
    },
    immediate: true,
  },
  data() {
    return {
      base_url: process.env.VUE_APP_BASE_API,
      dialogImageUrl: "",
      dialogVisible: false,
      addShow: false,
      index: 0,
      yyaqList: null,
      //旧数据
      oldform: {},
      huanyuan1: true,
      supplierFilesState: true,

      fileList: [],
      // CloudServicesFile : [] //云服务审核文件
      //数据
      // form: {
      //     cloudSupplier: undefined, //服务商
      //     hosts: [], //服务器列表
      //     databases: [], //数据库列表
      //     storeProducts: [], //存储产品列表
      //     aqchecked: [], //安全产品
      //     safeProducts: [], //安全产品真实数据
      //     remark: '', //说明
      // },
    };
  },
  created() {},
  mounted() {},
  methods: {
    fileUp() {
      this.$refs.fileList.upload();
    },
    upload(files) {
      this.$emit("upload", files);
    },
    changeFileList(fileList) {
      this.fileList = fileList;
    },
    getTableData(list) {
      let data = [];
      list.forEach((item) => {
        if (item.changeTo || this.taskName == "资源变更") {
          data.push(item);
        }
      });
      return data; // [list[0],list[1],list[2],list[3],list[4],list[5]] // data
    },

    gethostName(id) {
      let name = "";
      this.form.hosts.some((item) => {
        if (item.id == id) {
          name = item.hostName;
          return true;
        }
      });
      return name;
    },
    // 翻译高性能规格
    cloudFlavorCodeDesc(data) {
      var Name = "";
      this.configure.wlfwqList.forEach((item) => {
        if (item.code == data) {
          Name = item.remark;
        }
      });
      return Name;
    },
    // 翻译操作系统名称
    TranslateosName(name) {
      let OSNae;
      this.configure.czxtList.forEach((item) => {
        if (item.code == name) {
          OSNae = item.serviceName;
        }
      });
      return OSNae;
    },
    oncelod() {
      this.addShow = false;
      this.huanyuan1 = true;
    },

    // 等保可用域翻译
    availableDomains(id) {
      let availableDomainName;
      this.configure.available_domain.forEach((item) => {
        if (id == item.dictValue) {
          availableDomainName = item.dictLabel;
        }
      });
      return availableDomainName;
    },
    cloudFlavorCodes(id) {
      let cloudFlavorCodeName;
      this.configure.codeList.forEach((item) => {
        if (item.specCode == id) {
          cloudFlavorCodeName = item.specName;
        }
      });
      return cloudFlavorCodeName;
    },
    cloudFlavorCodess(id) {
      let cloudFlavorCodeName;
      this.configure.codeList.forEach((item) => {
        if (item.specCode == id) {
          cloudFlavorCodeName = item.desc;
        }
      });
      return cloudFlavorCodeName;
    },
    wlfwqLists(id) {
      let cloudFlavorCodeName;
      this.configure.wlfwqList.forEach((item) => {
        if (item.code == id) {
          cloudFlavorCodeName = item.serviceName;
        }
      });
      return cloudFlavorCodeName;
    },
    wlfwqListss(id) {
      let cloudFlavorCodeName;
      this.configure.wlfwqList.forEach((item) => {
        if (item.code == id) {
          cloudFlavorCodeName = item.remark;
        }
      });
      return cloudFlavorCodeName;
    },
    huanyuan(data, index, num) {
      // let form=JSON.parse(JSON.stringify(this.form))
      this.huanyuan1 = false;
      var localStorageoldform = JSON.parse(sessionStorage.getItem("oldform"));
      if (num == 1) {
        let hostss = localStorageoldform.hosts[index];
        let hostssChangeTo = JSON.parse(JSON.stringify(hostss));
        hostss.changeTo = hostssChangeTo;
        this.form.hosts[index] = hostss;
      } else if (num == 2) {
        let flag = this.form.hosts.changeTo
          ? this.form.hosts.changeTo
          : this.form.hosts.some((item) => {
              return item.id == data.hostId && item.insStatus != "REMOVE";
            });
        if (flag) {
          let databases = localStorageoldform.databases[index];
          let databasesChangeTo = JSON.parse(JSON.stringify(databases));
          databases.changeTo = databasesChangeTo;
          this.form.databases[index] = databases;
        } else {
          this.$message({
            type: "error",
            message: "请先还原相关服务器",
          });
        }
      } else if (num == 3) {
        if (!data.hostIds) {
          let storeProducts = localStorageoldform.storeProducts[index];
          let storeProductschangeTo = JSON.parse(JSON.stringify(storeProducts));
          storeProducts.changeTo = storeProductschangeTo;
          this.form.storeProducts[index] = storeProductschangeTo;
        } else {
          let flag = false;
          if (flag) {
            this.$message({
              type: "error",
              message: "请先还原相关服务器",
            });
          } else {
            let storeProductsa = localStorageoldform.storeProducts[index];
            let storeProductsachangeTo = JSON.parse(JSON.stringify(storeProductsa));
            storeProductsa.changeTo = storeProductsachangeTo;
            this.form.storeProducts[index] = storeProductsa;
          }
        }
      } else {
        let safeProductsa = localStorageoldform.safeProducts[index];
        let changeTo = JSON.parse(JSON.stringify(safeProductsa));
        safeProductsa.changeTo = changeTo;
        this.form.safeProducts[index] = safeProductsa;
      }
      //   this.form=form
      this.$emit("assignment", this.form);
      this.huanyuan1 = true;
    },
    previewFile(item) {
      if (
        item.fileExt == "jpeg" ||
        item.fileExt == "jpg" ||
        item.fileExt == "png" ||
        item.fileExt == "gif" ||
        item.fileExt == "pdf"
      ) {
        this.dialogImageUrl = this.base_url + item.filePath;
        this.dialogVisible = true;
      } else {
        this.$message.error(`仅限后缀名为 gif、jpeg、jpg、png 可预览`);
      }
    },
    previewFiles(item) {
      if (item.filePath) {
        this.dialogImageUrl = this.base_url + item.filePath;
        this.dialogVisible = true;
        return;
      } else {
        if (
          item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "gif" ||
          item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "jpeg" ||
          item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "jpg" ||
          item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "gif" ||
          item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "png"
        ) {
          this.dialogImageUrl = item.url;
          this.dialogVisible = true;
          return;
        } else {
          this.$message.error(`仅限后缀名为 gif、jpeg、jpg、png 可预览`);
        }
      }
    },
    DeleteFile(id) {
      this.supplierFilesState = false;
      this.$confirm("是否删除该文件?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        DelectUploadFile(id).then((res) => {
          if (res.code == 200) {
            this.form.files = this.form.files.filter((item) => {
              if (item.id == id) {
              } else {
                return item;
              }
            });
            this.form.supplierFiles = this.form.supplierFiles.filter((item) => {
              if (item.id == id) {
              } else {
                return item;
              }
            });
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
        });
      });
      this.supplierFilesState = true;
    },
    editSafe(index) {
      this.$prompt("请输入数量0~100", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        inputValue: this.form.safeProductsList[index].num,
      }).then((resp) => {
        if (!isNaN(resp.value) && parseInt(resp.value) >= 0 && parseInt(resp.value) <= 100) {
          this.form.safeProductsList[index].num = parseInt(resp.value);
          // this.NotModifyState=true
        }
      });
    },
    download(item) {
      let downloadFile =
        this.base_url + "/system/downloadFile?fileName=" + item.fileName + "&filePath=" + item.filePath;
      window.location.href = downloadFile;
      return;
    },
    DeleteFiles(data) {
      this.supplierFilesState = false;
      if (data.filePath) {
        DelectUploadFile(data.id).then((res) => {
          if (res.code == 200) {
            this.form.supplierFiles = this.form.supplierFiles.filter((item) => {
              if (item.id == data.id) {
              } else {
                return item;
              }
            });
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
        });
      } else {
        this.form.supplierFiles = this.form.supplierFiles.filter((item) => {
          if (item.uid == data.uid) {
          } else {
            return item;
          }
        });
      }
      this.supplierFilesState = true;
    },
    //文件列表变化
    handleChange(res, fileList) {
      this.supplierFilesState = false;
      this.form.supplierFiles = fileList;
      this.supplierFilesState = true;
    },
    handleChanges(res, fileList) {},
    //添加修改表格
    addTable(data) {
      data = JSON.parse(JSON.stringify(data));
      data.insStatus = "UPDATE";
      if (data.flavorType) {
        if (data.changeTo) {
          let addHostsdata = JSON.parse(JSON.stringify(data));
          delete addHostsdata.changeTo;
          this.addHosts(addHostsdata);
        } else {
          this.addHosts(data);
        }
      } else if (data.serverCode) {
        this.addDatabases(data);
      } else if (data.diskServerCode) {
        this.addStoreProducts(data);
      } else {
        let hostIds = [];
        this.form.hosts.forEach((item) => {
          hostIds.push(item.id);
        });
        this.form.safeProducts = [];
        let safeProductsAll = [];
        this.configure.yyaqList.forEach((item) => {
          safeProductsAll.push({
            productCode: item.code,
            productName: item.serviceName,
            hostIds,
          });
        });
        this.form.safeProducts = safeProductsAll;
        this.addShow = false;
        this.$emit("assignment", this.form);
        this.huanyuan1 = true;
      }
    },
    //添加存储产品列表
    addStoreProducts(data) {
      this.configure[data.productCode == "共享型" ? "ccList" : "fwcpList"].some((it) => {
        if (it.code == data.diskServerCode) {
          data.diskServerCode_label = it.serviceName;
          return true;
        }
      });
      if (this.addShow == 2) {
        this.form.storeProducts[this.index].changeTo = data;
      } else {
        this.form.storeProducts.push(JSON.parse(JSON.stringify(data)));
      }
      this.addShow = false;
      this.huanyuan1 = true;
    },
    //添加修改数据库列表
    addDatabases(data) {
      //数据库类型
      this.configure.sjkList.some((it) => {
        if (it.code == data.serverCode) {
          data.serverCode_label = it.serviceName;
          return true;
        }
      });
      if (this.addShow == 2) {
        this.form.databases[this.index].changeTo = data;
      } else {
        this.form.databases.push(data);
      }
      this.addShow = false;
      this.huanyuan1 = true;
    },
    //添加修改服务器列表
    addHosts(data) {
      if (Array.isArray(data.osServerCode)) {
        data.osServerCode = data.osServerCode[0];
      }
      //可用域
      this.configure.available_domain.some((item) => {
        if (item.dictValue == data.availableDomain) {
          data.availableDomain_label = item.dictLabel;
          return true;
        }
      });
      //数据盘类型
      if (data.disks) {
        data.disks.forEach((item, index) => {
          this.configure.ccList.some((it) => {
            if (it.code == item.diskServerCode) {
              data.disks[index].diskServerCode_label = it.serviceName;
              return true;
            }
          });
        });
      }
      if (data.flavorType == 1) {
        //系统盘类型
        if (data.osDisk) {
          this.configure.storage_type.some((item) => {
            if (item.code == data.osDisk.diskServerCode) {
              data.osDisk.diskServerCode_label = item.serviceName;
              return true;
            }
          });
        }

        //规格
        this.configure.codeList.some((item) => {
          if (item.specCode == data.cloudFlavorCode) {
            data.cloudFlavorCode_label = item.specName;
            data.cloudFlavorCode_desc = item.desc;
            return true;
          }
        });
      }
      if (data.flavorType == 2) {
        this.configure.wlfwqList.some((item) => {
          if (item.code == data.cloudFlavorCode) {
            data.cloudFlavorCode_label = item.serviceName;
            data.cloudFlavorCode_desc = item.remark;
            return true;
          }
        });
      }
      if (this.addShow == 2) {
        if (data.hostName && data.hostName == data.instanceName + "_" + data.num) {
          this.form.hosts[this.index].changeTo = data;
        } else {
          this.form.hosts[this.index].changeTo = data;
        }
      } else {
        let num = Number(data.instanceNum);
        data.instanceNum = 1;
        let sum = 0;
        this.form.hosts.forEach((item) => {
          if (item.instanceName == data.instanceName && item.num > sum) {
            sum = item.num;
          }
        });
        for (let i = 0; i < num; i++) {
          let temp = JSON.parse(JSON.stringify(data));
          if (!temp.num) {
            temp.num = sum + i + 1;
          }
          temp.hostName = temp.instanceName + "_" + temp.num;
          this.form.hosts[this.index].changeTo = temp;
        }
      }

      this.addShow = false;
      this.huanyuan1 = true;
    },
    //显示弹窗
    showAdd(num, data, index) {
      this.index = index;
      this.addShow = num;
      setTimeout(() => {
        this.huanyuan1 = false;
        this.$refs.addBdialog.init(JSON.parse(JSON.stringify(data)));
      }, 200);
    },
    //删除
    del(data, index, num) {
      let form = JSON.parse(JSON.stringify(this.form));
      if (num == 1) {
        let delhosts = JSON.parse(JSON.stringify(this.oldform.hosts[index]));
        delhosts.insStatus = "REMOVE";
        form.hosts[index].changeTo = delhosts;
        form.databases.forEach((item) => {
          if (item.hostId == data.id) {
            item.insStatus = "REMOVE";
          }
        });
        form.storeProducts.forEach((item) => {
          if (item.hostIds && item.hostIds.indexOf(data.id) > -1) {
            item.insStatus = "REMOVE";
          }
        });
      } else if (num == 2) {
        let deldatabases = JSON.parse(JSON.stringify(this.oldform.databases[index]));
        deldatabases.insStatus = "REMOVE";
        form.databases[index].changeTo = deldatabases;
      } else if (num == 3) {
        let delstoreProducts = JSON.parse(JSON.stringify(this.oldform.storeProducts[index]));
        delstoreProducts.insStatus = "REMOVE";
        form.storeProducts[index].changeTo = delstoreProducts;
      } else {
        let delsafeProducts = JSON.parse(JSON.stringify(this.oldform.safeProducts[index]));
        delsafeProducts.insStatus = "REMOVE";
        form.safeProducts[index].changeTo = delsafeProducts;
      }
      this.form = form;
      this.$emit("assignment", this.form);
    },
    dels(data, index) {
      this.$confirm("是否删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.form.safeProducts.splice(index, 1);
      });
    },
    //文件预览
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped lang="scss">
.dialog {
  padding-right: 20px;
  font-size: 12px;

  .title {
    text-align: left;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    padding-left: 4px;
    border-left: 4px solid #38b3aa;
  }

  .wrap {
    display: flex;
    background: #faf9ff;
    margin-top: 20px;
    border-radius: 10px;

    .wrap_title {
      padding: 0 10px;
      background: #f4f4f4;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;

      div {
        height: 100%;
        width: 14px;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }

    .wrap_item {
      display: flex;
      margin-top: 20px;

      div:first-child {
        width: 90px;
        font-weight: bold;
      }

      i {
        line-height: 28px;
        margin-right: 10px;
        font-size: 20px;
        color: #e83112;
      }
    }
  }

  .wrap1 {
    padding: 0 20px 20px 0px;
    background: #faf9ff;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    // justify-content: space-between;
    border-radius: 10px;

    div {
      margin-top: 20px;
      margin-left: 20px;
      width: calc(25% - 20px);
      min-width: 340px;
      display: flex;

      div {
        width: 100px;
        min-width: 100px;
        font-weight: bold;
        margin: 0;
        display: flex;
        padding-right: 10px;
        justify-content: flex-end;
        color: #606266;
      }
    }
  }

  .wrap2 {
    padding: 0 20px 20px 20px;
    background: #faf9ff;
    margin-bottom: 30px;
    justify-content: space-between;
    border-radius: 10px;

    div {
      margin-top: 20px;
    }
  }

  .wrap3 {
    padding: 20px;
    background: #faf9ff;
    margin-bottom: 30px;
    justify-content: space-between;
    border-radius: 10px;
  }

  .tab_wrap {
    display: flex;
    justify-content: space-between;

    div {
      width: 25%;
      padding: 10px 0;
    }

    div:first-child {
      font-weight: bold;
    }
  }
}
</style>
